<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="head" :style="style" :title="data.name">
    <div class="text" v-if="!data.url">{{ data.name }}</div>
  </div>
</template>

<script>
export default {
  props: {
    data: Object,
    headStyle: Object
  },
  data() {
    return {
      style: {
        background: `url(${this.data.url}) no-repeat center center`,
        backgroundSize: 'cover',
        ...this.headStyle
      }
    }
  }
}
</script>

<style scoped>
.head {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid #EEE;
  display: flex;
  justify-items: flex-end;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  position: relative;
}
.text {
  position: absolute;
  right: 0;
  top: 0;
  height: 30px;
  line-height: 32px;
  text-align: right;
}
</style>
